import React, { useEffect, useState } from "react";
import { Table, Button, Popconfirm, Form, Select } from "antd";
import { $adminList, $del, $getCheck } from "../../apis/adminApi";
import { $list } from "../../apis/roleListApi";
import AddAdmin from "./AddAdmin";

export default function Admin() {
  const columns = [
    {
      title: "编号",
      dataIndex: "id",
      width: "100px",
    },
    {
      title: "账号",
      dataIndex: "loginId",
      width: "100px",
    },
    {
      title: "姓名",
      dataIndex: "name",
      width: "100px",
    },
    {
      title: "电话",
      dataIndex: "phone",
      width: "100px",
    },
    {
      title: "头像",
      dataIndex: "photo",
      width: "100px",
    },
    {
      title: "角色",
      dataIndex: "role",
      width: "100px",
    },
    {
      title: "操作",
      key: "action",
      width: "4px",
      render: (ret) => (
        <Button
          size="small"
          style={{ borderColor: "orange", color: "orange" }}
          onClick={() => {
            edit(ret.id);
          }}
        >
          编辑
        </Button>
      ),
    },
    {
      title: "删除",
      key: "action",
      render: (ret) => (
        <Popconfirm
          title="提示"
          description="确认删除吗?"
          // onConfirm={() => {
          //   del(ret.key);
          // }}
          onConfirm={() => {
            del(ret.key);
          }}
          okText="确定"
          cancelText="取消"
        >
          <Button danger size="small">
            删除
          </Button>
        </Popconfirm>
      ),
    },
  ];
  //加载角色数据
  const [selectedItems, setSelectedItems] = useState([]);
  const [roleList, setRoleList] = useState([]);
  const loadAdminList = () => {
    $list().then((data) => {
      data = data.map((i) => {
        return {
          value: i.key,
          label: i.name,
        };
      });

      setRoleList([{ value: 0, label: "all" }, ...data]);
    });
  };
  //查询选中角色方法
  const check = () => {
    const select = document.querySelector(".select");
    $getCheck(select.innerText).then((res) => {
      let data = res.map((i) => {
        return {
          ...i,
          key: i.id,
        };
      });
      setAdminList(data);
    });
  };
  const [adminList, setAdminList] = useState([]);
  const [open, setOpen] = useState(false);
  const [loginId, setLoginId] = useState(0);
  const showDrawer = () => {
    setOpen(true);
  };
  //修改信息
  const edit = (loginId) => {
    setOpen(true);
    setLoginId(loginId);
  };
  // 删除用户
  const del = async (key) => {
    await $del({ key });
    loadList();
    alert("删除成功");
  };
  useEffect(() => {
    loadList();
    loadAdminList();
  }, [loginId]);
  const loadList = () => {
    $adminList({}).then(({ count, data }) => {
      data = data.map((i) => {
        return {
          ...i,
          key: i.id,
        };
      });
      setAdminList(data);
    });
  };
  return (
    <>
      <Select
        className="select"
        style={{ width: "200px", marginRight: "5px" }}
        showSearch
        optionFilterProp="children"
        defaultValue="all"
        options={roleList}
        onChange={setSelectedItems}
      />
      <Button style={{ marginRight: "5px" }} onClick={check}>
        查询
      </Button>
      <Button className="add" onClick={showDrawer}>
        添加
      </Button>
      <Table columns={columns} dataSource={adminList} />
      <AddAdmin
        open={open}
        setOpen={setOpen}
        loadList={loadList}
        loginId={loginId}
        setLoginId={setLoginId}
        setAdminList={setAdminList}
      ></AddAdmin>
    </>
  );
}
